<template>
	<!-- 我的足迹 -->
	<view class="container" :class="{'bottom': edit}">
		<!-- 标题 -->
		<headTitle title="我的足迹" :bottomline="true" :mine="true"></headTitle>
		<view class="cart-op" v-if="this.shopList.length>0 && !isEmpty">
			<text class="cart font28 color666" @tap="editOp">{{ edit ? '完成' : '编辑' }}</text>
		</view>
		<view class="content bgfff">
			<view class="goods" v-for="(item, index) in shopList" :key="index" @tap="goto(item.productId)">
				<view class="title font28 color666" v-if="status[0] === index">今天</view>
				<view class="title font28 color666" v-if="status[1] === index">昨天</view>
				<view class="title font28 color666" v-if="status[2] === index">两天前</view>
				<view class="goods-item flex-center">
					<view class="select" :class="{'active': item.flag}" v-show="edit" @tap="check(index)">
						<image class="icon-active img-size-repeat" v-show="item.flag"></image>
					</view>
					<view class="default flex-center" :class="{'edit': edit}">
						<img class="goods-img" :src="item.productImg" mode="aspectFill"></img>
						<view class="right flex-column-between">
							<view class="info show-two-text font28 color333">{{ item.productName }}</view>
							<view class="prcie-b">
								<text class="font24 colorred fontb">￥</text>
								<text class="font30 colorred fontb">{{ item.price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<view class="bottom-op bgfff flex-center-between" v-show="this.shopList.length>0 && edit">
			<view class="flex-center" @tap="allcheck">
				<view class="select" :class="{'active': allChecked}">
					<image class="icon-active img-size-repeat" v-show="allChecked"></image>
				</view>
				<view class="font26 color666">全选</view>
			</view>
			<button class="delBtn bgfff font28" @tap="delShop">删除</button>
		</view>
		<!-- 空白页 -->
		<empty title="您还没有商品的足迹" v-if="isEmpty"></empty>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
import empty from '@/components/empty'
export default {
	components: {
		uniLoadMore,
		empty,
		headTitle
	},
	onLoad() {
		this.pageNum = 1
		this.getData('refresh')
	},
	data() {
		return {
			pageNum: 1,
			allChecked: false, // 全选
			loadingType: 'more',
			isEmpty: false, // 不为空
			edit: false, // 是否在编辑
			shopList: [], // 数据
			selectArr: [], // 选中的数据
			status: [-1, -1, -1], // 日期状态
		}
	},
	//加载更多
	onReachBottom() {
		this.pageNum += 1
		this.getData()
	},
	methods: {
		// 跳转到商品详情页
		goto(id) {
			this.$common.navigateTo('/pages/product/product?id=' + id)
		},
		// 处理时间
		handleTime() {
			this.status = [-1, -1, -1]
			this.shopList.map((item, index) => {
				if(item.timeType === 0 && this.status[0] === -1) {
					this.status[0] = index
				}else if(item.timeType === 1 && this.status[1] === -1) {
					this.status[1] = index
				}else if(item.timeType === 2 && this.status[2] === -1) {
					this.status[2] = index
				}
			})
		},
		// 删除收藏商品
		delShop() {
			if(this.selectArr.length === 0) {
				this.$api.msg('请选择删除的商品')
				return
			}
			uni.showModal({
				content: '确定要删除吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: async (res) => {
					if (res.confirm) {
						let res = await Api.apiCall('get', Api.goods.delFootprint, {id: this.selectArr.toString()}, true)
						if(res) {
							this.$api.msg('删除成功')
							this.handleDel()
							this.handleTime()
						}
					}
				}
			})
		},
		// 处理删除
		handleDel() {
			let arr = []
			this.selectArr.map(item => {
				this.shopList.some((val, index) => {
					if(val.id === item) {
						arr.push(index)
						return true
					}
				})
			})
			arr.sort().reverse().map(item => {
				this.shopList.splice(item, 1)
			})
			this.editOp()
		},
		// 选中商品
		check(idx) {
			let val = this.shopList[idx]
			let f = !val.flag
			this.$set(this.shopList[idx], 'flag', f)
			// 选中或取消选中
			f ?  this.selectArr.push(val.id) : this.selectArr.splice(this.shopList.indexOf(val.id), 1)
			// 设置全选或反选
			this.allChecked = this.selectArr.length === this.shopList.length ? true : false
		},
		// 全选反选
		allcheck() {
			this.allChecked = !this.allChecked
			this.shopList && this.shopList.map(item => {
				this.$set(item, 'flag', this.allChecked)
			})
			if(this.allChecked) {
				this.selectArr = []
				this.shopList.map(item => {
					this.selectArr.push(item.id)
				})
			}else {
				this.selectArr = []
			}
		},
		// 点击编辑
		editOp() {
			this.edit = !this.edit
			// 全部取消
			if(!this.edit) {
				this.shopList.map(item => {
					this.$set(item, 'flag', false)
				})
				this.selectArr = []
				this.allChecked = false
			}
		},
		// 获取数据
		async getData(type = 'add') {
			// 没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return
				}
				this.loadingType = 'loading'
			} else {
				this.loadingType = 'more'
			}
			let list = await Api.apiCall('get', Api.goods.getAllFootprint, { 
				pageIndex: this.pageNum,
				pageSize: 10,
			})
			if(!list) return
			let shopList = list.recordList
			if (type === 'refresh') {
				this.shopList = []
			}
			this.shopList = this.shopList.concat(shopList)
			this.handleTime()
			
			// 如果全选是选中时
			if(this.allChecked) {
				this.selectArr = []
				this.shopList.map(item => {
					this.$set(item, 'flag', this.allChecked)
					this.selectArr.push(item.id)
				})
			}
			if(this.shopList.length === 0) {
				this.isEmpty = true
			}
			// 判断是否有下一页数据
			this.loadingType = list.hasMore == 0 ? 'nomore' : 'more'
		}
	},

}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}

.container {
	&.bottom {
		margin-bottom: 110rpx;
	}
}

.cart-op {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	height: 88rpx;
	line-height: 88rpx;
	.cart {
		width: 70rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		margin-right: 30rpx;
		letter-spacing: 1rpx;
	}
}

.select {
	position: relative;
	width: 42rpx;
	height: 42rpx;
	border-radius: 50%;
	border: 2rpx solid #DDD;
	margin-right: 20rpx;
	&.active {
		border: 0;
	}
	.icon-active {
		position: absolute;
		top: 0;
		left: 0;
		width: 42rpx;
		height: 42rpx;
		background-image: url('/static/image/cartselect.png');
	}
}

.content {
	margin: 0 0 20rpx;
	.goods {
		margin-left: 30rpx;
		&:not(:last-child) {
			border-bottom: 1rpx solid #EEE;
		}
		.title {
			width: calc(100% + 30rpx);
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 30rpx;
			margin-left: -30rpx;
			background-color: #F5F5F5;
		}
		.goods-item {
			width: 100%;
			height: 268rpx;
			padding: 30rpx 30rpx 30rpx 0;
			.select {
				position: absolute;
			}
			.default {
				transition: all .3s;
				&.edit {
					transform: translateX(62rpx);
				}
				.goods-img {
					width: 208rpx;
					height: 208rpx;
					border-radius: 3rpx;
					margin-right: 20rpx;
				}
				.right {
					width: calc(100% - 228rpx);
					height: 208rpx;
					.info {
						transform: translateY(-2px);
						line-height: 40rpx;
					}
					.prcie-b {
						transform: translateY(5px);
					}
				}
			}
		}
		
	}
}

.bottom-op {
	padding: 0 30rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 110rpx;
	.delBtn {
		width: 186rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border: 1rpx solid #C84739;
		border-radius: 40rpx;
		color: #C84739;
		padding: 0;
		margin: 0;
		&::after {
			border: 0;
		}
	}
}
</style>
